<template>
  <a-modal title="动态表单配置" :width="680" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="屏蔽渠道">
        <a-tree-select v-model="form.preventChannelId" multiple style="width: 100%" :tree-data="treeData" tree-checkable
          show-checked-strategy="SHOW_CHILD" placeholder="请选择" :maxTagCount="1"
          :dropdownStyle="{ maxHeight: '360px' }" />
      </a-form-model-item>
      <a-form-model-item label="满足条件">
        <a-radio-group v-model="form.meetConditions">
          <a-radio :value="1">全部不匹配</a-radio>
          <a-radio :value="2">满足条件</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-collapse default-active-key="1" :bordered="false">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="1" header="身份信息">
          <a-form-model-item label="年龄">
            <a-input-group compact>
              <a-input-number v-model="age1" :min="0" style=" width: 70px; text-align: center" placeholder="20"
                @change="onChange" />
              <a-input-number :min="0" style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                placeholder="-" disabled />
              <a-input v-model="age2" style="width: 70px; text-align: center; border-left: 0" placeholder="60"
                @change="onChange" />
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item label="身份证">
            <a-checkbox-group v-model="form.idCard">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="性别">
            <a-checkbox-group v-model="form.sex">
              <a-checkbox value="男">男</a-checkbox>
              <a-checkbox value="女">女</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="资产情况">
          <a-form-model-item label="借款额度">
            <a-checkbox-group v-model="form.loanAmount">
              <a-checkbox value="50000">50000</a-checkbox>
              <a-checkbox value="100000">100000</a-checkbox>
              <a-checkbox value="200000">200000</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="房屋信息">
            <a-checkbox-group v-model="form.house">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="车辆信息">
            <a-checkbox-group v-model="form.car">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="公积金">
            <a-checkbox-group v-model="form.accumulation">
              <a-checkbox value="六个月以上">六个月以上</a-checkbox>
              <a-checkbox value="六个月以下">六个月以下</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="芝麻分">
            <a-checkbox-group v-model="form.sesameSeed">
              <a-checkbox value="700以上">700以上</a-checkbox>
              <a-checkbox value="650-699以内">650-699以内</a-checkbox>
              <a-checkbox value="600-649以内">600-649以内</a-checkbox>
              <a-checkbox value="600以下">600以下</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="完善信息" :disabled="false">
          <a-form-model-item label="逾期情况">
            <a-checkbox-group v-model="form.overdueSituation">
              <a-checkbox value="无逾期">无逾期</a-checkbox>
              <a-checkbox value="有逾期">有逾期</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="职业">
            <a-checkbox-group v-model="form.profession">
              <a-checkbox value="上班族">上班族</a-checkbox>
              <a-checkbox value="公务员-事业单位">公务员-事业单位</a-checkbox>
              <a-checkbox value="私营企业主">私营企业主</a-checkbox>
              <a-checkbox value="自由职业">自由职业</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="社保">
            <a-checkbox-group v-model="form.socialSecurity">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="保险">
            <a-checkbox-group v-model="form.insurance">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="花呗额度">
            <a-checkbox-group v-model="form.huabei">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="京东白条额度">
            <a-checkbox-group v-model="form.jdQuota">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: [String, Number],
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        const { preventChannelId, meetConditions, planConditionConfigVOList } = JSON.parse(JSON.stringify(this.default || '{}'));
        this.form = {
          ...this.form,
          preventChannelId: preventChannelId ? preventChannelId.split(',') : [],
          meetConditions,
        };
        planConditionConfigVOList.map((item) => {
          const { label, labelName, content } = item;
          const _content = content || '';
          if (labelName === '年龄') {
            this.form[label] = _content;
            const age = _content.split('-');
            this.age1 = age[0] || '';
            this.age2 = age[1] || '';
          } else {
            this.form[label] = _content.split(',');
          }
        });
      }
    },
  },
  data() {
    return {
      modalLoading: false,
      age1: '',
      age2: '',
      form: {
        preventChannelId: [],
        meetConditions: 2,
        age: '',
        idCard: [],
        sex: [],
        loanAmount: [],
        house: [],
        car: [],
        accumulation: [],
        sesameSeed: [],
        overdueSituation: [],
        profession: [],
        socialSecurity: [],
        insurance: [],
        huabei: [],
        jdQuota: [],
      },
      treeData: [],
      keyList: [
        { label: 'age', labelName: '年龄', showType: 2, requireVerify: 0 },
        { label: 'idCard', labelName: '身份证', showType: 3, requireVerify: 0 },
        { label: 'sex', labelName: '性别', showType: 1, requireVerify: 0 },
        { label: 'loanAmount', labelName: '借款额度', showType: 1, requireVerify: 0 },
        { label: 'house', labelName: '房屋信息', showType: 1, requireVerify: 0 },
        { label: 'car', labelName: '车辆信息', showType: 1, requireVerify: 0 },
        { label: 'accumulation', labelName: '公积金', showType: 1, requireVerify: 0 },
        { label: 'sesameSeed', labelName: '芝麻分', showType: 1, requireVerify: 0 },
        { label: 'overdueSituation', labelName: '逾期情况', showType: 1, requireVerify: 0 },
        { label: 'profession', labelName: '职业', showType: 1, requireVerify: 0 },
        { label: 'socialSecurity', labelName: '社保', showType: 1, requireVerify: 0 },
        { label: 'insurance', labelName: '保险', showType: 1, requireVerify: 0 },
        { label: 'huabei', labelName: '花呗额度', showType: 1, requireVerify: 0 },
        { label: 'jdQuota', labelName: '京东白条额度', showType: 1, requireVerify: 0 },
      ],
    };
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    onChange() {
      this.form.age = this.age1 + '-' + this.age2;
    },
    getSelect() {
      Ajax.getChannelSelect().then((res) => {
        if (res.success) {
          this.treeData = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              title: it.channelName,
              value: it.id,
            }))
            : [];
        }
      });
    },
    handleModalConfirm() {
      this.modalLoading = true;
      const filterConditionList = this.keyList.map((item) => ({
        ...item,
        content: item.labelName === '年龄' ? this.form[item.label] : this.form[item.label].join(','),
      }));
      const { preventChannelId, meetConditions } = this.form;
      const params = {
        planId: this.id,
        preventChannelId: preventChannelId.join(','),
        meetConditions,
        filterConditionList,
      };
      Ajax.filterPlanCityList(params).then(({ success }) => {
        if (success) {
          this.$message.success('保存成功');
          this.$emit('success');
          this.handleModalCancel();
        }
      }).finally(() => {
        this.modalLoading = false;
      });
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.keyList = this.$options.data().keyList;
      this.age1 = '';
      this.age2 = '';
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-collapse-borderless>.ant-collapse-item {
  // border: none;
}

::v-deep .ant-collapse-borderless {
  background-color: #fff;
}

::v-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header {
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  font-size: 16px;
}

::v-deep .ant-collapse-content-box {
  padding: 0 0 16px;
}

::v-deep .ant-divider {
  margin: 16px 0 12px;
}

::v-deep .ant-form-item {
  margin-bottom: 2px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
